<template>
  <!-- 设置用户基本信息 -->
  <view class="settings">
    <!-- <view class="avator">
      <view class="inner" @tap="startImage">
        <img src="../../static/img/avator.svg" alt="" />
        <m-icon class="scan" type="camera"></m-icon>
      </view>
    </view> -->
    <view class="content">
      <uni-forms v-model="formData" ref="form" validateTrigger="bind" :rules="rules" @submit="submit">
        <uni-forms-item label="体温" name="temperature" labelWidth="85" required>
          <input placeholder="请输入体温如：36.5" :value="formData.temperature" @blur="binddata('temperature', $event.detail.value)" />
        </uni-forms-item>
        <uni-forms-item label="异常体征" name="desc" labelWidth="85">
          <picker @change="handleListChange($event, 'desc', character, 'id')" :value="character.findIndex(e => e.id === formData['desc'])" range-key="label" :range="character">
            <view class="inner">
              <!-- <text :class="{'uni-input': true, 'placeholder': !formData['desc']}">{{formData['desc'] || '请选择异常体征'}}</text> -->
              <text :class="{'uni-input': true, 'placeholder': !matchLabel(character, formData['desc'])}">{{matchLabel(character, formData['desc'], '请选择异常体征')}}</text>
            </view>
          </picker>
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="btn-row">
      <button class="primary" type="primary" :loading="btnLoading" @tap="handleSubmit">保存</button>
    </view>
  </view>
</template>
<script>
  import mIcon from '@/components/m-icon/m-icon.vue';
  import Api from '@/api/main';

  export default {
    components: {
      mIcon
    },
    data() {
      return {
        uid: '',
        id: '',
        temperature: '',
        desc: '',
        btnLoading: false,
        avator: '',
        rules: {
          temperature: {
            rules: [
            {
              required: true,
              errorMessage: '请输入体温'
            }]
          }
        },
        // 表单数据
        formData: {},
        genderList: [
        {
          label: '男',
          value: 1
        },
        {
          label: '女',
          value: 2
        },
        {
          label: '未知',
          value: 9
        }],
        character: [
          // {
          //   id: '1',
          //   label: '密接'
          // },
          // {
          //   id: '2',
          //   label: '次密'
          // }
        ],
      };
    },
    methods: {
      // 获取证件类型
      async getCondition() {
        const res = await this.$http.post(Api.getCondition);
        if (res && res.character) {
          this.character = res.character
        }
      },
      handleListChange($event, name, list, key) {
        console.log('handleListChange', arguments);
        const index = Number($event.detail.value);
        console.log('index', index);
        key ? this.binddata(name, list[index][key]) : this.binddata(name, list[index])
      },
      matchLabel(list = [], value, placeholder = '') {
        if (!list || !list.length || !value) {
          return placeholder
        }

        const target = list.find(item => item.id === value)
        return target ? target.label : placeholder
      },
      // 提交表单
      handleSubmit() {
        if (this.btnLoading) {
          return;
        }
        this.$refs.form.submit();
      },

      // 提交表单&校验
      submit(event) {
        const { errors, value } = event.detail;
        console.log('event', event);
        if (errors) return;
        this.save(value);
      },

      // 保存表单
      async save(value) {
        this.id ? this.updateTemperature(this.id, this.formData) : this.addTemperature(this.formData);
      },
      // 增加体温
      async addTemperature(val = {}) {
        console.log('add-tem', val);
        const res = await this.$http.post(Api.addTemperature, { ...val, uid: this.uid });
        if (res) {
          this.$toast('更新成功');
          uni.navigateBack()
        }
      },
      // 修改体温
      async updateTemperature(id, value) {
        console.log('update-tem', id, value);
        const res = await this.$http.post(Api.updateTemperature, { id, temperature: value.temperature, desc: value.desc, uid: this.uid });
        if (res) {
          this.$toast('修改成功');
          uni.navigateBack()
        } else {
          // this.$toast('修改失败');
        }
      },
    },
    onLoad({ uid, id, desc, temperature }) {
      this.uid = uid
      this.id = id
      this.desc = desc
      this.temperature = temperature
      console.log('id', this.id);
      console.log('uid', this.uid);

      if (this.desc) {
        this.$set(this.formData, 'desc', this.desc)
      }
      if (this.temperature) {
        this.$set(this.formData, 'temperature', this.temperature)
      }

      this.getCondition()
    }
  };
</script>
<style lang="scss">
  .settings {
    width: 100%;
    padding: 0 40rpx;

    button {
      width: 100%;
    }

    .avator {
      height: 200rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f7fafd;

      .inner {
        position: relative;
      }

      .scan {
        position: absolute;
        right: 28rpx;
        bottom: 20rpx;
        color: $uni-color-primary;
        font-size: 48rpx;
      }

      img {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
        // background-color: ;
      }
    }

    .uni-list-cell-pd {
      margin-right: 20rpx;

      .uni-radio-wrapper {
        margin-right: 20rpx;
      }
    }

    label {
      font-size: 26rpx;
    }


  }

  picker {
    .inner>.placeholder {
      // font-size: 34rpx;
      color: $uni-text-color-placeholder;
    }
  }

  .uni-input,
  input {
    font-size: 30rpx;
  }
</style>